<template>
	<table class="table table-bordered">
		<tr class=".active">
			<th>ID</th>
			<th>名称</th>
			<th>价格</th>
			<th>操作</th>
		</tr>
		<tr v-for="(c,index) in cs">
			<td>{{c.id}}</td>
			<td>{{c.name}}</td>
			<td>{{c.price}}</td>
			<td><button type="button" class="btn btn-primary btn-xs edit">修改</button>
				<button type="button" class="btn btn-default btn-xs del" @click="del(c.id,index)">删除</button>
			</td>
		</tr>
	</table>
</template>

<script>
	Vue.component('clist', {
		template: ``,
		props: ['cs'],
		methods: {
			del(id, index) {
				this.$emit('dd', id, index)
			}
		}
	})
</script>

<style>
	table {
		width: 100%;
	}
</style>
